import QtQuick
import QtQuick.Layouts
import QtCharts

Rectangle {
    Layout.fillWidth: true
    Layout.fillHeight: true

    ChartView {
        id: chartView
        title: "坐标轴共有属性"
        titleFont.bold: true
        titleFont.pointSize: 14

        anchors.fill: parent
        antialiasing: true

        ValueAxis {
            id: valueAxisX
            min: 0
            max: 4

            // 1. 设置X轴颜色
            // color: "#1296FF"

            // 2. 设置X轴标签样式
            // labelsColor: "#1296FF"
            // labelsFont.family: "Courier"
            // labelsFont.pointSize: 12
            // labelsFont.bold: true

            // 3. 设置X轴标签倾斜角度
            // labelsVisible: true
            // labelsAngle: 45

            // 4. 设置X轴网格线样式
            // gridLineColor: "#888888"
            // gridVisible: true

            // 5. 设置X轴标题样式
            // titleFont.family: "Courier"
            // titleFont.pointSize: 14
            // titleFont.bold: true
            // titleText: "X Title"
            // titleVisible: true

            // 6. 设置X轴阴影
            // shadesBorderColor: "#333333"
            // shadesColor: "#999999"
            // shadesVisible: true

            // 7. 设置X轴数据反转
            // reverse: true

            // 8. 设置X轴标签截断（用于文本过长的情况，改成大号字体，方便突出效果）
            // max: 999999999
            // labelsColor: "#1296FF"
            // labelsFont.family: "Courier"
            // labelsFont.pointSize: 12
            // labelsFont.bold: true
            // truncateLabels : true

            // 9. 设置X轴不可见
            // visible: false

            // 10. 设置X轴次要网格线
            minorGridLineColor : "#F0F0F0"
            minorGridVisible: true
            minorTickCount: 4
        }

        ValueAxis {
            id: valueAxisY
            min: 0
            max: 16
            titleText: "Y Title"
        }

        LineSeries {
            name: "line"
            XYPoint { x: 0; y: 0 }
            XYPoint { x: 1; y: 1 }
            XYPoint { x: 2; y: 4 }
            XYPoint { x: 3; y: 9 }
            XYPoint { x: 4; y: 16 }
            axisX: valueAxisX
            axisY: valueAxisY
        }
    }
}
